<template>
  <div class="xr-table-header">
    <flexbox v-show="!handleShow" class="xr-table-header__body" align="center">
      <slot />
    </flexbox>
    <flexbox v-show="handleShow" class="xr-table-header__handle">
      <div class="selected—title">
        已选中 <span class="selected—count">{{ selects.length }}</span> 项
      </div>
      <flexbox class="selection-items-box">
        <slot name="prefix" />
        <el-button v-for="(item, index) in handles"
          :icon="wkIconPre(item.icon)"
          :key="index"
          type="primary"
          @click="selectionBarClick(item.command)">{{ item.label }}</el-button>
        <slot name="suffix" />
      </flexbox>
    </flexbox>
    <slot name="append" />
  </div>
</template>

<script setup>
// 表头
import {computed} from "vue";

defineOptions({
  name: 'XrTableHeader',
})

const props = defineProps({
  selects: {
    type: Array,
    default: () => {
      return []
    }
  },
  handles: {
    type: Array,
    default: () => {
      return []
    }
  }
})

// 操作展示
const handleShow = computed(() => {
  return props.selects && props.selects.length > 0
})

const emits = defineEmits(['command'])
function selectionBarClick(command) {
  emits('command', command)
}

function wkIconPre(name) {
  return name.startsWith('wk') ? name : `wk wk-${name}`
}


</script>


<script>

export default {


  components: {
  },
  props: {

  },
  data() {
    return {}
  },
  computed: {

  },
  watch: {},
  mounted() {},

  beforeDestroy() {},
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.xr-table-header {
  background: white;

  &__handle {
    font-size: 12px;
    height: 50px;
    padding: 0 20px;
    color: #777;

    .selected—title {
      flex-shrink: 0;
      padding-right: 20px;
      color: #333;
      .selected—count {
        color: $xr-color-primary;
      }
    }
  }

  .selection-items-box {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 15px;

    .el-button {
      color: #666;
      background-color: #f9f9f9;
      border-color: #e5e5e5;
      font-size: 12px;
      height: 28px;
      border-radius: 4px;
      :deep(i) {
        font-size: 12px;
        margin-right: 5px;
      }
    }

    .el-button--primary:hover {
      background: $xr-color-primary;
      border-color: $xr-color-primary;
      color: #ffffff;
    }

    .el-button + .el-button {
      margin-left: 15px;
    }
  }

  &__body {
    font-size: 13px;
    height: 50px;
    padding: 0 20px;
  }
}
</style>
